<!--
 * @Author: malgee
 * @Date: 2025-04-28 08:53:00
 * @LastEditors: maling
 * @LastEditTime: 2025-04-28 12:49:58
 * @FilePath: /vue3-ts-cms/src/components/page-modal/src/page-modal.vue
 * @Description:  
 * 
-->
<template>
  <div class="page-modal">
    <el-dialog 
      title="新建用户"
      width="30%"
      center
      destroy-on-close
      v-model="dialogVisible"
    >
      <mg-form v-bind="props.formConfig" v-model="formData"></mg-form>
      <slot></slot>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirmClick">
            确 定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import mgForm from '@/base-ui/form';
import { ref, defineProps, defineExpose } from 'vue';

const props = defineProps({
  formConfig: {
    type: Object,
    required: true
  },
  defaultInfo: {
    type: Object,
    default: () => ({})
  },
  otherInfo: {
    type: Object,
    default: () => ({})
  },
  pageName: {
    type: String,
    required: true
  }
})

const formData = ref({})
const dialogVisible = ref(false)

const handleConfirmClick = () => {
  dialogVisible.value = false
}

defineExpose({
  dialogVisible,
})

</script>
<style lang="less" scoped>

</style>